<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>问卷模板搜索</title>
        <link href="/static/lib/layui/css/layui.css" rel="stylesheet"/>
        <link href="/static/css/style.css" rel="stylesheet">
        <style>
            .layui-card {
                box-shadow: 0 0 8px #ccc;
            }
            .layui-card:hover{
                box-shadow: 0 0 10px #1E9FFF;
            }
            .layui-card-body{
                height: 80px;
                color: #808080;
                font-size: 13px;
            }
        </style>
    </head>
    <body>
        <div th:insert="~{header}"></div>
        <div th:insert="~{questionnaire_template_search_div}"></div>
        <div class="layui-container" style="margin-top:10px;min-height:500px;margin-bottom: 20px">
            <p style="margin: 20px 0" class="text-dark-gray" th:if="${res.totalHits > 0}">
                <i class="layui-icon layui-icon-list"></i>
                问卷Online为您找到相关问卷模板
                <span>共<span th:text="${res.totalHits}" class="layui-badge layui-bg-blue"></span>份</span>
            </p>
            <p style="margin: 20px 0" class="text-dark-gray" th:if="${res.totalHits <= 0}">
                <i class="layui-icon layui-icon-list"></i>
                未找到相关问卷模板，请换个搜索词试试吧！
            </p>
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md4" th:each="t : ${res.searchHits}">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <a th:href="'/template/preview/'+${t.content.id}" title="预览模板" target="_blank">
                                <h3 class="layui-icon layui-icon-list" th:utext="${t.content.name}"></h3>
                            </a>
                        </div>
                        <div class="layui-card-body">
                            <p th:if="${t.highlightFields.name[0]}"
                                  th:utext="'问卷名称：'+${t.highlightFields.name[0]}"></p>
<!--                            <span th:if="${t.highlightFields.questions\.questionTitle[0]}"-->
<!--                                  th:utext="'包含问题：'+${t.highlightFields.questions\.questionTitle[0]}"></span>-->
                            <p th:text="'共'+${t.content.questionCount}+'题'"></p>
                            <p>
                                <span th:text="'发布日期：'+${#dates.format(t.content.publishDate,'yyyy/MM/dd HH:mm:ss')}"></span>
                                <a th:href="'/template/preview/'+${t.content.id}" class="layui-btn layui-btn-normal layui-btn-xs"
                                    title="预览模板" target="_blank">
                                    预览
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div th:insert="footer.html"></div>
    </body>
    <script src="/static/lib/layui/layui.all.js"></script>
    <script src="/static/lib/jquery-1.9.1.min.js"></script>
</html>